import { Button, Form, Input } from "antd";
import { TypeSelect, UserSelect } from "../../components/IdSelect";
import { useTasksSearchParams } from "./utils";
import { useSetUrlQueryParam } from "../../hooks/useUrlQueryParam";

export const TaskSearchPanel = () => {
  // 加上的话搜索起来卡卡的
  // const params = useDebounce(useTasksSearchParams(), 200);
  const params = useTasksSearchParams();
  const setParams = useSetUrlQueryParam();
  const reset = () => {
    setParams({
      name: undefined,
      processorId: undefined,
      tagId: undefined,
      typeId: undefined,
    });
  };

  return (
    <Form style={{ marginBottom: "2rem" }} layout="inline">
      <Form.Item>
        <Input
          placeholder="任务名"
          value={params.name}
          onChange={(e) => setParams({ name: e.target.value })}
        />
      </Form.Item>
      <Form.Item>
        <UserSelect
          defaultOptionName="经办人"
          value={params.processorId}
          onChange={(value) => setParams({ processorId: value })}
        />
      </Form.Item>
      <Form.Item>
        <TypeSelect
          value={params.typeId}
          onChange={(value) => setParams({ typeId: value })}
        />
      </Form.Item>
      <Form.Item>
        <Button onClick={reset}>清除筛选器</Button>
      </Form.Item>
    </Form>
  );
};
